<template>
  <el-card class="box-card">
    <!-- 添加按钮 -->
    <el-button
      type="primary"
      :disabled="!category3Id"
      icon="el-icon-plus"
      class="attrList-btn"
      @click="handleAddAttr"
    >
      添加属性
    </el-button>
    <!-- 表格 -->
    <el-table
      v-loading="loading"
      :data="attrList"
      border
      style="width: 100%"
      class="attrList-table"
    >
      <el-table-column type="index" align="center" label="序号" width="50px" />
      <el-table-column
        prop="attrName"
        align="center"
        label="属性名"
        width="180"
      />
      <!-- scope:{
            row, 当前行数据
            $index 序号
          } -->
      <el-table-column v-slot="{ row }" label="属性值列表" align="center">
        <el-tag
          v-for="attrValue in row.attrValueList"
          :key="attrValue.id"
          class="attr-tag"
        >
          {{ attrValue.valueName }}
        </el-tag>
      </el-table-column>
      <el-table-column v-slot="{ row }" label="操作" align="center">
        <!-- 编辑按钮 -->
        <el-tooltip
          slot="reference"
          effect="dark"
          content="修改属性"
          placement="top"
        >
          <el-button
            icon="el-icon-edit"
            type="warning"
            size="mini"
            @click="handleEditAttr(row)"
          />
        </el-tooltip>
        <!-- 删除按钮 -->
        <el-popconfirm
          confirm-button-text="确定"
          cancel-button-text="取消"
          icon="el-icon-info"
          icon-color="red"
          title="确定删除吗？"
          @onConfirm="handleDeleteAttr(row.id)"
        >
          <el-tooltip
            slot="reference"
            effect="dark"
            content="删除属性"
            placement="top"
          >
            <el-button icon="el-icon-delete" type="danger" size="mini" />
          </el-tooltip>
        </el-popconfirm>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script>
import { mapState } from 'vuex'
import { reqGetAttrInfoList, reqDeleteAttr } from '@/api/product/attr'

export default {
  name: 'AttrList',
  data() {
    return {
      loading: false,
      attrList: []
    }
  },
  computed: {
    ...mapState('category', ['category1Id', 'category2Id', 'category3Id'])
  },
  watch: {
    // 监听三界分类选中值得变化，发送请求 获取属性列表
    category3Id: {
      immediate: true,
      async handler() {
        if (this.category3Id) {
          const { category1Id, category2Id, category3Id } = this
          this.loading = true
          const { data } = await reqGetAttrInfoList({
            category1Id,
            category2Id,
            category3Id
          })
          this.loading = false
          this.attrList = data
        } else {
          this.attrList = []
        }
      }
    }
  },
  methods: {
    // 删除商品属性
    handleDeleteAttr(attrId) {
      this.attrList = this.attrList.filter(attr => {
        return attr.id !== attrId
      })
      this.$message({ type: 'success', message: '删除属性成功' })
      reqDeleteAttr(attrId)
    },
    // 编辑商品属性
    handleEditAttr(row) {
      this.$emit('editAttr', row)
      this.$emit('showSaveAttr', true)
    },
    // 添加商品属性
    handleAddAttr() {
      // 添加前初始化父组件中要传递的数据
      this.$emit('editAttr', {
        // 属性名
        attrName: '',
        // 增加的属性列表
        attrValueList: []
      })
      this.$emit('showSaveAttr', true)
    }
  }
}
</script>

<style lang="sass" scoped>
.attr-tag
  margin:0 5px

.attrList-btn
  margin-bottom:20px

.attrList-table
  margin-bottom:20px
</style>
